<template>
  <div>
    <div class="box" v-for="time in arr" :key="time.id">
      <router-link :to="'/Getails/' + time.id">
        <div class="box_img">
          <img :src="time.imgsrc" />
        </div>
      </router-link>
      <router-link :to="'/Getails/' + time.id">
        <div class="text">
          <h2>
            <van-tag type="primary">{{ time.Tag }}</van-tag
            >{{ time.name }}
          </h2>
          <p>
            <span>{{ time.site }}</span> <span>{{ time.details }}</span> 建面<span>{{
              time.area
            }}</span>
          </p>
          <div class="price">
            <i>{{ time.price }}</i
            >{{ time.unit }}
          </div>
          <div>
            <van-tag plain type="primary" size="10px" color="#d55851">{{
              time.Tag1
            }}</van-tag
            >&nbsp;
            <van-tag plain type="primary" size="10px" color="#acbff1">{{
              time.Tag2
            }}</van-tag
            >&nbsp;
            <van-tag plain type="primary" size="10px" color="#cccbd1">{{
              time.Tag3
            }}</van-tag>
          </div>

          <div class="vr"><img :src="time.vr" /></div>
          <i style="font-size: 14px"
            ><span class="got">{{ time.Tag4 }}</span> &nbsp;{{ time.txt }}</i
          >
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "New07",
  data() {
    return {
      arr: [],
    };
  },
  created() {
    axios("http://localhost:3000/New").then((res) => {
      this.arr = res.data;
      console.log(this.arr);
    });
  },
};
</script>

<style scoped>
.box {
  width: 3.4rem;
  margin: 0 auto;

  padding-top: 0.16rem;
  padding-bottom: 0.14rem;
  border-bottom: 2px solid #f7f7f7;
  display: flex;
}
.text {
  margin-left: 0.1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.text h2 {
  font-size: 0.15rem;
  color: #000;
  font-weight: 900;
}
.text p {
  font-size: 0.11rem;
}
.price {
  color: #ff2e13;
  font-size: 0.1rem;
}
.price i {
  font-size: 0.15rem;
  font-weight: 900;
}
.ranking {
  font-size: 0.12rem;
}
.vr {
  margin-top: 0.04rem;
}
.got {
  background-color: #f77552;
  color: #fff;
  font-size: 0.1rem;
}
</style>
